<template>
    <div>
        <div>
            <img :src="logoImg" height="100" />
        </div>
        <div style="background-color:oldlace;">

            <MHeader/>
            <TabBar :show="0"/>
            <Slider/>
            <Recommend/>
            <div class="m-container">
                <h3>最新上架</h3>
            </div>
            <div v-if="productId!==0">
                <Details :product-id="productId"  @changeProductId="getProductId"/>
            </div>


            <ProductList :products="products" @changeProductId="getProductId"/>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>


</template>

<script>
    import TabBar from "../../components/TabBar";
    import Header from "./components/Header";
    import Slider from "./components/Slider";
    import Recommend from "./components/Recommend";
    import ProductList from "./components/ProductList";
    import {getProductList} from "../../utils/apis";
    import Details from "../../components/Details";

    export default {
        name: "Index",
        components: {
            Details,
            ProductList,
            Recommend,
            Slider,
            MHeader: Header,
            TabBar
        },
        data() {
            return {
                products: [],
                productId: 0,
                logoImg:require("./images/logo.png")
            };
        }, created() {
            this.onLoad();
        },
        watch: {
            productId(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        },
        methods: {
            // 获取数据
            onLoad() {
                getProductList({pageSize: 6}).then(res => {
                    this.products = res.data.list
                })
            },
            getProductId(productId) {
                this.productId = productId
            }
        }
    }
</script>

<style scoped>
    .m-container {
        padding: 12px;
    }
</style>
